<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font-weight: bold;
        }

        body {
            background-color: #9e9595;
        }

        .main {
            width: 400px;
            height: 400px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: #4969ae;
            border-radius: 50%;
            box-shadow: 0 0 15px #1e90ff;
        }

        .main span {
            width: 90%;
            height: 90%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            color: white;
            font-size: 25px;
            text-shadow: 0 0 5px rgb(128, 122, 122);
        }

        .main span:nth-child(1) {
            align-items: flex-start;
            justify-content: center;
        }

        .main span:nth-child(2) {
            align-items: center;
            justify-content: flex-end;
        }

        .main span:nth-child(3) {
            align-items: flex-end;
            justify-content: center;
        }

        .main span:nth-child(4) {
            align-items: center;
            justify-content: flex-start;
        }

        .hour {
            width: 8px;
            height: 25%;
            background: #ced6e0;
            left: 50%;
            top: 25%;
            position: absolute;
            border-radius: 4px;
            transform-origin: center bottom;
            box-shadow: -2px -2px 5px black;
            transform: translateX(-50%);
            opacity: 0.5;
        }

        .min {
            width: 8px;
            height: 30%;
            background: #1e90ff;
            left: 50%;
            top: 20%;
            position: absolute;
            border-radius: 2px;
            transform-origin: center bottom;
            box-shadow: -2px -2px 5px black;
            transform: translateX(-50%);
            opacity: 0.5;
        }

        .sec {
            width: 2px;
            height: 35%;
            background: #2b2e31;
            left: 50%;
            top: 15%;
            position: absolute;
            border-radius: 1px;
            transform-origin: center bottom;
            box-shadow: -2px -2px 5px black;
            transform: translateX(-50%);
        }

        .cir {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            background: #1e90ff;
            box-shadow: 0 0 5px black;
        }

        .clock {
            position: absolute;
            font-size: 20px;
            left: 50%;
            top: 75%;
            transform: translateX(-50%);
            color: #1e90ff;
            background: #53606e;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
</head>

<body>
    <div class="main">
        <span>12</span><span>3</span><span>6</span><span>9</span>
        <div class="clock" >00:00:00</div>
        <div class="hour"></div>
        <div class="min"></div>
        <div class="sec"></div>
        <div class="cir"></div>
    </div>

    <script>
        // var hour = document.getElementsByClassName("hour")[0]
        // var min = document.getElementsByClassName("min")[0]
        // var sec = document.getElementsByClassName("sec")[0]
        // var clock = document.getElementsByClassName("clock")[0]
        var hour = document.querySelector('.hour')
        var min = document.querySelector('.min')
        var sec = document.querySelector('.sec')
        var clock = document.querySelector('.clock')


        function tik() {
            var now = new Date()
            var secrotate = 0.006 * (now.getSeconds() * 1000 + now.getMilliseconds()) + "deg"
            sec.setAttribute('style', 'transform:translateX(-50%) rotate(' + secrotate + ')')
            var minrotate = 6 * now.getMinutes() + "deg"
            min.setAttribute('style', 'transform:translateX(-50%) rotate(' + minrotate + ')')
            var hourrotate = 30 * (now.getHours()%12) + "deg"
            hour.setAttribute('style', 'transform:translateX(-50%) rotate(' + hourrotate + ')')
            var clockstr = ("0" + now.getHours()).slice(-2)
            clockstr += ":" + ("0" + now.getMinutes()).slice(-2)
            clockstr += ":" + ("0" + now.getSeconds()).slice(-2)
            clock.innerHTML = clockstr
        }
        setInterval(tik,1000)
    </script>
</body>

</html>